﻿@page "/gantt-chart/remote-data"

@using Syncfusion.Blazor.Gantt
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the way of binding data to Gantt Chart with a remote service. The Gantt Chart data source is bound to remote data using the DataManager. The data in this sample shows the various phases of barley harvesting.</p>
</SampleDescription>
<ActionDescription>
    <p>
        The <code>DataSource</code> property in Gantt Chart can be assigned with the instance of <code>DataManager</code> to bind remote data.
        The DataManager, which will act as an interface between the service endpoint and the Gantt Chart, will require
        the below minimal information to interact with service endpoint properly.
        <ol>
            <li><code>DataManager->Url</code> - Defines the service endpoint to fetch data</li>
            <li><code>DataManager->Adaptor</code> - Defines the adaptor option. </li>
        </ol>
    </p>
</ActionDescription>

<div class="control-section">
    <div class="row">
        <div class="col-md-12">
            <SfGantt TValue="GanttRemoteData" TreeColumnIndex="1" Height="450px" Width="100%" AllowSelection="true" HighlightWeekends="true"
                     GridLines="GridLine.Both" ProjectStartDate="@ProjectStart" ProjectEndDate="@ProjectEnd">
                <SfDataManager Url="https://ej2services.syncfusion.com/production/web-services/api/GanttData" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager>
                <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate"
                                 Duration="Duration" Progress="Progress" Dependency="Predecessor" Child="SubTasks">
                </GanttTaskFields>
                <GanttColumns>
                    <GanttColumn Field="TaskId" HeaderText="Task Id" Visible="false"></GanttColumn>
                    <GanttColumn Field="TaskName" HeaderText="Task Name" Width="250"></GanttColumn>
                    <GanttColumn Field="StartDate"></GanttColumn>
                    <GanttColumn Field="Duration"></GanttColumn>
                </GanttColumns>
                <GanttTimelineSettings TimelineUnitSize="300">
                    <GanttTopTierSettings Unit="TimelineViewMode.Month" Format="MMMM yyyy"></GanttTopTierSettings>
                    <GanttBottomTierSettings Unit="TimelineViewMode.Week" Format="dddd, dd MMMM"></GanttBottomTierSettings>
                </GanttTimelineSettings>
                <GanttLabelSettings LeftLabel="TaskName" TValue="GanttRemoteData">
                </GanttLabelSettings>
                <GanttSplitterSettings Position="30%"> </GanttSplitterSettings>
            </SfGantt>
        </div>
    </div>
</div>

@code{
    public DateTime ProjectStart = new DateTime(2019, 2, 24);
    public DateTime ProjectEnd = new DateTime(2019, 12, 10);
    public class GanttRemoteData
    {
        public int TaskId { get; set; }
        public string TaskName { get; set; }
        public DateTime StartDate { get; set; }
        public int? Duration { get; set; }
        public int Progress { get; set; }
        public string Predecessor { get; set; }
        public List<GanttRemoteData> SubTasks { get; set; }
    }
}
